 <template>
    <div class="category_box">
      <div class="category" v-for="item in navigationForm">
        <div class="category_Img">
          <img :src="item.logo" width="100%" height="100%">
        </div>
        <span class="category_Name">{{item.name}}</span>
      </div>
    </div>
  </template>

  <script>
    import {list} from '@/api/navigation';
    import {mapGetters} from 'vuex';
    import utils from '../../../../utils/utils.js'
    export default {
      data() {
        return {
          navigationForm: [
            {
                    name: "天猫新品",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E5%A4%A9%E7%8C%AB.png",
                },
                {
                    name: "天猫超市",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E5%B0%8F%E8%B6%85%E5%B8%82.png",
                },
                {
                    name: "充值中心",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E5%85%85%E5%80%BC.png",
                },
                {
                    name: "淘鲜达",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E6%B5%B7%E9%B2%9C.png",
                },
                {
                    name: "阿里拍卖",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E6%8D%A1%E6%BC%8F%E5%A4%A7%E9%9B%86.png",
                },
                {
                    name: "分类",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E6%9B%B4%E5%A4%9A%E5%88%86%E7%B1%BB.png",
                },
          ],
          pageNum: 1,
          pageSize: 6,
          tagIds:[]
        }
      },
      created(){
        this.loadNavigation()
      },
      computed: {
        ...mapGetters([
          'mchId'
        ])
      },
      props:[
        'content'
      ],
      methods:{
        loadNavigation() {
          var _this = this
          console.log(this.content)
          if (!utils.isNull(this.content.tagids)) {
            this.tagIds = this.content.tagids.split(',');
            for (var i = 0; i < _this.tagIds.length; i++) {
              _this.tagIds[i] = parseInt(_this.tagIds[i])
            }
          }
          let params = new URLSearchParams();
          params.append('pageNum', _this.pageNum);
          params.append('pageSize', _this.pageSize);
          params.append('mchId', this.mchId);
          for (var i = 0; i < _this.tagIds.length; i++) {
            params.append('tagIds',_this.tagIds[i])
          }
          list(params).then(response => {
            response.data.data.forEach(item=>{
              if (utils.isNull(item.logo)){
                item.logo='http://cdnx.hulu.fj.cn/upload/20200624/4.png'
              }
              if (utils.isNull(item.name)){
                item.name="专家评估"
              }
            })
            console.log(response)
            if(response.data.data.length>0){
              _this.navigationForm = response.data.data
            }
            _this.navigationForm.forEach(function (item) {
              item.logo = utils.thumbnail(item.logo,270,200)
            })
          }).catch(error => {
            console.log('error!!')
          });
        },
      }
    }
  </script>

  <style scoped>
    .category_box {
      width: 355px;
      padding-top: 25px;
      padding-left: 11px;
      padding-right: 11px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-left: 10px;
      background-color: white;
      border-radius: 6px;
    }

    .category {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100px;
      margin-bottom: 25px;
    }

    .category_Img {
      width: 36px;
      height: 36px;
    }

    .category_Name {
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      color: rgba(43, 43, 43, 1);
      opacity: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      width: 100%;
      text-align: center;
      margin-top: 8px;
    }
  </style>
